<template>
	<view class="container">
		<!--  -->
		<!-- <u-navbar style="position: fixed;z-index: 100;" :border-bottom="false" :is-fixed="true" title="会员权益" :background="navbarBackground" title-color="#fff"></u-navbar> -->

		<view class="status-bar"></view>
		<view class="vip-head">
			<image class="vip-head-background" src="@/static/images/vip/vip-card-background.png" mode="aspectFit"></image>
			<view class="vip-head-card">
				<image class="vip-head-card-background" src="/static/images/vip/vip-card-body.png" mode="aspectFit"></image>
				<view class="user-info">
					<image class="user-info-face" :src="userInfo.avatar.file_path" mode="aspectFill"></image>
					<view class="user-info-text">
						<view class="user-info-text-name">{{ userInfo.nickName }}</view>
						<view class="user-info-text-level">{{ userInfo.vip ? userInfo.vip.plan.plan_name : '普通用户' }}</view>
						<view class="user-info-text-desc" @tap.stop="toPage" data-url="/pageUser/vip/log">{{ userInfo.vip ? userInfo.vipEndTimeToNow : '开通会员享受额外特权' }}到期</view>
					</view>
				</view>

				<view class="user-info-btn" @tap.stop="onTogglePayPopup" v-if="userInfo.is_vip == 0">开通会员</view>
				<view class="user-info-btn" @tap.stop="onTogglePayPopup" v-else>续费会员</view>
			</view>
		</view>
		<view class="vip-title"><view class="vip-title-text">会员等级</view></view>
		<view class="vip-check-group">
			<view class="vip-check-item " :class="{ current: planIndex == index }" @tap.stop="checkPlanItem" :data-index="index" v-for="(plan, index) in planList" :key="plan.plan_id">
				<view class="vip-name">{{ plan.plan_name }}</view>
				<view class="vip-validity">{{ plan.effective }}天</view>
				<view class="vip-price">{{ plan.money }}</view>
				<view class="vip-tips" style="margin-top: 25rpx;">到期自动关闭</view>
				<view class="vip-tips" v-if="plan.buy_times <= -1">可随时续费</view>
				<view class="vip-tips" v-else>可购买{{ plan.buy_times }}次</view>
			</view>
		</view>
		<view class="vip-buy-btn" @tap.stop="onTogglePayPopup">
			<block v-if="userInfo.is_vip == 1">立即续费</block>
			<block v-else>立即开通</block>
		</view>
		<view class="vip-title" style="margin-top: 52rpx;"><view class="vip-title-text">会员权益</view></view>
		<view class="vip-content" v-if="planList.length > 0"><u-parse :html="planList[planIndex].content"></u-parse></view>
		<payment-popup source="vip" v-if="showPayPopup" @close="onTogglePayPopup" @confirm="payVip"></payment-popup>
	</view>
</template>

<script>
import Payment from '@/utils/Payment.js';
import paymentPopup from '@/components/custom/payment-popup.vue';
import Tools from '@/utils/Tools.js';
export default {
	components: { paymentPopup },
	data() {
		return {
			planList: [],
			planIndex: 0,
			showPayPopup: false
		};
	},
	onLoad() {
		this.getPlanData();
	},
	onShow() {
		setTimeout(() => {
			this.refreshUserInfo();
		}, 1000);
	},
	computed: {
		navbarBackground: function() {
			return {
				backgroundColor: 'rgba(0,0,0,0)'
			};
		}
	},
	methods: {
		getPlanData() {
			this.$u.api.getVipCenter().then(res => {
				const planList = res.data.planList;
				for (let i = 0; i < planList.length; i++) {
					if (planList[i].buy_times <= -1) {
						this.planIndex = i;
						break;
					}
				}
				this.planList = planList;
			});
		},
		checkPlanItem(e) {
			this.planIndex = e.currentTarget.dataset.index;
		},
		onTogglePayPopup() {
			this.showPayPopup = !this.showPayPopup;
		},
		payVip(data) {
			this.$u.api
				.buyVip(this.planList[this.planIndex].plan_id, data.pay_type)
				.then(res => {
					if (res.data.need_pay == 1) {
						this.paySuccess();
					} else {
						Payment.pay(
							res.data.payment,
							data.pay_type,
							() => {
								this.paySuccess();
							},
							msg => {
								this.refreshUserInfo();
								this.$u.toast(msg.errMsg);
								this.disabled = false;
							}
						);
					}
				})
				.catch(e => {
					this.disabled = false;
					this.showPayPopup = false;
				});
		},
		paySuccess() {
			Tools.showSuccess('购买成功');
			this.refreshUserInfo();
			this.getPlanData();
			this.disabled = false;
			this.showPayPopup = false;
		}
	}
};
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background: #fff;
}
.status-bar {
	height: var(--status-bar-height);
	width: 750rpx;
	background-color: #000000;
}
.vip-head {
	height: 403rpx;
	background-color: #000;
	position: relative;
	padding-top: 114rpx;
	.vip-log-time {
		position: absolute;
		color: #fff;
		z-index: 99;
		top: calc(var(--status-bar-height) + 44px + 0rpx);
		font-size: 20rpx;
		right: 110rpx;
	}
	.vip-head-background {
		width: 750rpx;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		position: absolute;
		z-index: 0;
	}
	.vip-head-card {
		z-index: 2;
		width: 750rpx;
		height: 328rpx;
		position: relative;
		padding: 72rpx 135rpx 0;

		.vip-head-card-background {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.user-info {
			display: flex;
			.user-info-face {
				width: 100rpx;
				height: 100rpx;
				border-radius: 100rpx;
				border: 2rpx solid rgb(255, 255, 255);
				z-index: 2;
			}
			.user-info-text {
				margin-left: 40rpx;
				color: rgba(255, 255, 255, 1);
				z-index: 3;
				.user-info-text-name {
					height: 45rpx;
					font-size: 32rpx;
					font-weight: 500;
					line-height: 45rpx;
				}
				.user-info-text-level {
					height: 30rpx;
					font-size: 22rpx;
					font-weight: 500;
					line-height: 30rpx;
					margin-top: 7rpx;
				}
				.user-info-text-desc {
					height: 30rpx;
					font-size: 22rpx;
					font-weight: 400;
					line-height: 30rpx;
					letter-spacing: 2rpx;
					margin-top: 10rpx;
					&::after {
						content: '购买记录';
						text-decoration: underline;
						padding-left: 20rpx;
					}
				}
			}
		}
		.user-info-btn {
			width: 184rpx;
			height: 63rpx;
			border-radius: 36rpx;
			border: 2rpx solid rgba(255, 255, 255, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			bottom: 47rpx;
			z-index: 3;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			color: #fff;
			box-sizing: border-box;
		}
	}
}
.vip-title {
	height: 40rpx;
	margin-top: 67rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	&::after,
	&::before {
		content: '';
		display: block;
		width: 161rpx;
		height: 3rpx;
	}
	&::before {
		background: linear-gradient(270deg, rgba(187, 139, 8, 1) 0%, rgba(255, 255, 255, 0) 100%);
		margin-right: 25rpx;
	}
	&::after {
		background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(187, 139, 8, 1) 100%);
		margin-left: 25rpx;
	}
	.vip-title-text {
		height: 40rpx;
		line-height: 40rpx;
		letter-spacing: 2rpx;
		color: rgba(187, 139, 8, 1);
		font-size: 28rpx;
	}
}
.vip-content {
	padding: 30rpx 70rpx;
}
.vip-check-group {
	padding: 0 127rpx;
	margin-top: 28rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.vip-check-item {
		position: relative;
		width: 220rpx;
		height: 292rpx;
		border-radius: 22rpx;
		background: #fff;
		border: 2rpx solid rgba(187, 139, 8, 1);
		margin-right: 17rpx;
		margin-top: 17rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		flex-direction: column;
		&:nth-child(2n) {
			margin-right: 0;
		}
		&:nth-child(-n + 2) {
			margin-top: 0;
		}
		&.current {
			background: #fdecd5;
			border: 2rpx solid rgba(187, 139, 8, 1);
		}
		.vip-name {
			height: 38rpx;
			background: rgba(85, 125, 176, 1);
			border-bottom-right-radius: 22rpx;
			color: #fff;
			padding: 0 19rpx;
			position: absolute;
			top: 0;
			left: 0;
			font-size: 24rpx;
			letter-spacing: 2rpx;
		}
		.vip-validity {
			margin-top: 58rpx;
			height: 33rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);
			line-height: 33rpx;
			letter-spacing: 2rpx;
		}
		.vip-price {
			height: 50rpx;
			font-size: 40rpx;
			font-weight: 400;
			color: #f8ca7c;
			line-height: 50rpx;
			margin-top: 38rpx;
			&::before {
				content: '¥';
				font-size: 20rpx;
				margin-right: 4rpx;
			}
		}
		.vip-tips {
			height: 30rpx;
			font-size: 18rpx;
			font-weight: 400;
			color: rgba(151, 151, 151, 1);
			line-height: 30rpx;
			letter-spacing: 1rpx;
		}
	}
}
.vip-buy-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 605rpx;
	height: 80rpx;
	background: #f8ca7c;
	border-radius: 40rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: rgba(0, 0, 0, 1);
	letter-spacing: 2rpx;
	margin: 34rpx auto 0;
}
</style>
